<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>python大作业项目：b站弹幕分析</title>
    <style>body{
    margin: 0;
    padding: 0;
    background: #f4eeee;
    background-size: cover;
    font-family: sans-serif;
}  .flashget{
    position: fixed;
    top: 0;
    width: 100%;
    height: 10%;
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    color: rgb(255, 255, 255);
}  button[name="return"]{
    z-index: auto;
    display: inline-block;
    position: fixed;
    height: 90%;
    width: 100px;
    top: 5%;
    left: 1%;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    letter-spacing: 1px;
    transition: all 0.2s linear;
    cursor: pointer;
    background: #f4eeee;
    font-size: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
    -webkit-border-radius: 3px;
    color: #0a0a0a;
}  button[name="return"] > svg {
    margin-right: 5px;
    margin-left: 5px;
    font-size: 20px;
    transition: all 0.4s ease-in;
}  button[name="return"]:hover > svg {
    font-size: 1.2em;
    transform: translateX(-5px);
}  button[name="return"]:hover {
    box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
    transform: translateY(-2px);
}div#line{
        position: absolute;
 }div#wordcloud{
        position: absolute;
                             }</style>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
</head>
<body>
    <div class="flashget">
        <button type="button" name="return" onclick="return_()">返回搜索</button>
    </div>
    <script>
        function return_(){
            window.location.href = 'http://dks.cpolar.cn'
        }
    </script>
    <div id="line"></div>
    <script>
        $(
            function () {
                var h = window.innerHeight
                var w = window.innerWidth
                if(w>h){
                    document.getElementById("line").style.height = h * 0.9 + "px";
                    document.getElementById("line").style.width = w * 0.5 + "px";
                    document.getElementById("line").style.left = "0px";
                    document.getElementById("line").style.top = h * 0.1 + "px";
                }else{
                    document.getElementById("line").style.height = h * 0.35 + "px";
                    document.getElementById("line").style.width = w + "px";
                    document.getElementById("line").style.left = "0px";
                    document.getElementById("line").style.top = h * 0.1 + "px";
                }
                var linechart = echarts.init(document.getElementById('line'), {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://dks.cpolar.cn/index/linechart",
                    dataType: 'json',
                    success: function (result) {
                        linechart.setOption(result);
                        linechart.resize();
                    }
                });
            }
        )
    </script>
    <div id="wordcloud"></div>
    <script type="text/javascript" src="/echarts-wordcloud.js"></script>
    <script type="text/javascript">
        $(
            function () {
                var h = window.innerHeight
                var w = window.innerWidth
                if(w>h) {
                    document.getElementById("wordcloud").style.height = h * 0.9 + "px"
                    document.getElementById("wordcloud").style.width = w * 0.5 + "px"
                    document.getElementById("wordcloud").style.left = w * 0.5 + "px"
                    document.getElementById("wordcloud").style.top = h * 0.1 + "px"
                }else{
                    document.getElementById("wordcloud").style.height = h * 0.55 + "px"
                    document.getElementById("wordcloud").style.width = w + "px"
                    document.getElementById("wordcloud").style.left = "0px"
                    document.getElementById("wordcloud").style.top = h * 0.45 + "px"
                }
                var wordcloudchart = echarts.init(document.getElementById('wordcloud'), {renderer: 'canvas'});
                $.ajax({
                    type: "GET",
                    url: "http://dks.cpolar.cn/index/wordcloudchart",
                    dataType: 'json',
                    success: function (result) {
                        wordcloudchart.setOption(result);
                        wordcloudchart.resize();
                    }
                });
            }
        )
    </script>
</body>
</html>